<template>
  <el-dialog
    title="分配"
    :visible.sync="dialogVisible"
    width="70%"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <el-row style="margin-bottom: 17px">
      <my-form
        :ref-obj.sync="searchForm.ref"
        :form-opts="searchForm"
        :width-size="2"
        @handleEvent="handleSearchEvent"
      >
        <div slot="right" style="margin-left: 20px">
          <el-button type="primary" @click="submitForm">搜索</el-button>
          <el-button type="warning" @click="resetForm">重置</el-button>
        </div>
      </my-form>
    </el-row>
    <el-row>
      <el-button type="primary" @click="handleSubmit">分配</el-button>
      <!-- <el-button type="warning" @click="removeAccounts">批量删除</el-button>
      <el-button>导出</el-button> -->
    </el-row>
    <BaseTable
      :has-index="true"
      :has-border="true"
      :table-data="tableData"
      :table-data-total="total"
      :table-column-options="tableColumnOptions"
      :select-table-data="historyData"
      @tableUpdate="tableUpdate"
      @selectionChange="selectionChange"
    >
      <template #operation="{ data }">
        <div
          class="action"
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <!-- <el-link :underline="false">查看 </el-link> -->
          <el-link :underline="false" @click="removeRole(data.id)">
            分配
          </el-link>
        </div>
      </template>
    </BaseTable>
  </el-dialog>
</template>
<script>
import config from './config'
import BaseTable from '@/components/BaseTable'
import { getDistributionList, allocationPersonnel, getHistory, finishAllocation } from '@/api/personnel'

export default {
  components: {
    BaseTable
  },
  data () {
    return {
      dialogVisible: false,
      tableData: [],
      total: 0,
      tableColumnOptions: config.tableColumnOptions,
      searchForm: config.searchForm,
      currentPage: 1,
      id: '',
      // 专家id
      reviewExpert: '',
      // 评委id
      reviewJudges: '',
      historyData: [],
      flag: true
    }
  },
  created () {},
  methods: {
    open (id) {
      this.id = id
      this.dialogVisible = true
      this.getDistributionList()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 分页变化时
    tableUpdate (e) {
      console.log(e)
      this.currentPage = e.currentPage
      this.getDistributionList()
    },
    // 表格内容勾选改变时触发
    selectionChange (e) {
      console.log(e)
      // 专家id数组
      const reviewExpert = []
      // 评委id数组
      const reviewJudges = []
      e.forEach((item) => {
        switch (item.role) {
          case '专家':
            reviewExpert.push(item.id)
            break
          case '评委':
            reviewJudges.push(item.id)
            break
          default:
            break
        }
        this.reviewExpert = reviewExpert.join(',')
        this.reviewJudges = reviewJudges.join(',')
      })
    },
    // 搜索事件
    submitForm () {
      this.searchForm.ref.validate((valid) => {
        if (!valid) return
        this.getDistributionList()
        console.log(this.searchForm.formData)
      })
    },
    resetForm () {
      this.currentPage = 1
      this.searchForm.ref.resetFields()
      // 清空校验
      this.searchForm.ref.clearValidate()
      this.getDistributionList()
    },
    // 获取分配人员列表
    async getDistributionList () {
      const query = {
        page: this.currentPage,
        ...this.searchForm.formData
      }
      const res = await getDistributionList(query)
      // 获取历史分配
      this.total = res.data.total
      this.tableData = res.data.data
      this.getHistory(this.id)
      console.log(res)
    },
    // 获取分配历史
    async getHistory (id) {
      const res = await getHistory({ personnel_id: id })
      const ids = [...res.data.review_expert.split(','), ...res.data.review_judges.split(',')]
      console.log(ids)
      this.historyData = this.tableData.filter(item => {
        return ids.includes(item.id.toString())
      })
    },
    // 分配人员
    async allocationPersonnel (data) {
      const res = await allocationPersonnel(data)
      if (this.flag) {
        this.finishAllocation()
      }
      this.$message.success('保存成功')
      this.dialogVisible = false
      this.$emit('finish')
      console.log(res)
    },
    // 完成分配
    async finishAllocation () {
      const res = await finishAllocation({ personnel_id: this.id })
      this.dialogVisible = false
      this.$emit('finish')
      console.log(res)
    },
    handleSubmit () {
      if (this.reviewExpert.length === 0 && this.reviewJudges.length === 0) {
        return this.$message.error('未选中')
      }
      const data = {
        id: this.id,
        review_expert: this.reviewExpert,
        review_judges: this.reviewJudges
      }
      this.$confirm('是否完成分配？', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '保存',
        type: 'warning'
      }).then(() => {
        this.flag = true
        this.allocationPersonnel(data)
      }).catch(() => {
        this.flag = false
        this.allocationPersonnel(data)
      })
    },
    handleSearchEvent () {}
  }
}
</script>
<style lang="scss" scoped>
// ::v-deep.el-form.t-form {
//   justify-content: space-around !important;
// }
</style>
